<template>
    <el-dialog title="导入" v-model="visible" width="30%" >
            <el-upload
                    ref="uploadRef"
                    :multiple="false"
                    :on-success="onUploadSuccess"
                    :on-error="onUploadError"
                    :action="action"
                    :headers="headers"
                    :auto-upload="false"
            >
                <template #trigger>
                    <el-button size="small" type="primary">选择文件</el-button>
                </template>
                <template #tip>
                    <span class="tip">只能上传xls文件，且不超过500kb</span>
                </template>
            </el-upload>
        <template #footer>
            <el-button type="primary" @click="submit">确认上传</el-button>
            <el-button type="default" @click="visible=false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import {ElMessage} from 'element-plus'

    export default {
        name: "DataImport",
        emits:['upload-success','upload-error'],
        setup(){
        },
        props:{
            action: ''
        },
        data(){
            return{
                visible: false,
                headers: {
                    Authorization: localStorage.getItem('tokenStr')
                }
            }
        },
        methods:{
            onUploadSuccess(){//上传成功后的回调方法
                ElMessage.success('上传成功');
                this.$emit('upload-success')
                // this.$refs.uploadRef.clearFiles();//清除已经上传成功的文件
            },
            onUploadError(){
                ElMessage.error('文件上传失败!请检查你的文件是否有问题。')
                this.$emit('upload-error')
            },
            submit(){
                this.$refs.uploadRef.submit();//提交
                // this.$refs.uploadRef.abort();//取消提交
            }
        }
    }
</script>

<style scoped>
    .tip{
        color: #666666;
        font-size: 12px;
    }
</style>
